DOM：document object model。

定義：網頁就是一個document，可以利用chrome的開發者工具觀察到，各種標籤都是element
。

document.querySelector('.選擇器或是標籤')：當我們在.js檔中，填入本行程式碼，並輸入想編輯的選擇器或是標籤，就可以利用；如果有多個相同的標籤，則只會選取第一個。

let el = document.querySelector('.navbar');

document.querySelectorAll('.選擇器或是標籤')：可以同時選取多個相同的標籤，並以陣列型態呈現；如想利用API進行編輯需用陣列方式如，el[0]進行。

簡單應用

element.textContent ：變更目標選擇器或是標籤的文字內容

let el = document.querySelector('.選擇器或是標籤');
el.textContent = 'CCC';      //變更目標選擇器或是標籤的文字內容為CCC

element.innerHTML：會先刪掉html的預設元素，再新增html標籤元素。

let el = document.querySelector('.選擇器或是標籤');
el.innerHTML = '<h1>new標題</h1>';

element.insertAdjacentHTML(position, text);：在4個可以自行選擇的位置中，插入想要的標籤及內容。

<!-- beforebegin -->      //位置1
<p>
  <!-- afterbegin -->     //位置2
  foo
  <!-- beforeend -->      //位置3
</p>
<!-- afterend -->         //位置4

let el = document.querySelector('.選擇器或是標籤');
el.insertAdjacentHTML('beforebegin', '<h1>new標題</h1>');;

element.setAttribute(name, value);：name為屬性名稱，value為屬性值；可以針對目標標籤的屬性作編輯。

let el = document.querySelector("table");
console.log(el);

let el = document.querySelector("table");
console.log(el);
el.setAttribute("class", "red");

element.getAttribute(name, value);：可以用獲取標籤的內部屬性之值，例如class、herf

let el = document.querySelector("th");
console.log(el);

console.log(el.getAttribute("class"));     //red

console.log(el.innerHTML);                 //<span>內容</span>
console.log(el.textContent);               //內容

表單取值

//html
<input type="text" class="txt" value="E-mail">



//.js
let el = document.querySelector(".txt");
console.log(el);

console.log(el.value);   
el.value = '聯絡資訊';   //賦予新的值
console.log(el.value);

反查document.querySelector作用在DOM的節點位置：

有時因為需要，所以查詢作用的節點位置(標籤)，此時可以利用nodeName。

let el = document.querySelector(".button");
console.log(el.nodeName);   //INPUT